<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <el-input
                placeholder="请输入内容"
                v-model="input"
                class="input-with-select"
            >
              <template #prepend>
                <el-select v-model="select" placeholder="请选择">
                  <el-option label="管理员" value="1"></el-option>
                  <el-option label="评委" value="2"></el-option>
                  <el-option label="学生" value="3"></el-option>
                </el-select>
              </template>
              <template #append>
                <el-button icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
            ref="configurationTable"
            :data="tableData"
            border
            stripe
            key="couponAmount"
            style="width: 100%">
          <el-table-column type="index" align="center"  label="#" ></el-table-column>
          <el-table-column prop="username" align="center"  label="账号" ></el-table-column>
          <el-table-column prop="name" align="center"  label="姓名" > </el-table-column>
          <el-table-column prop="gender" align="center"  label="性别" > </el-table-column>
          <el-table-column prop="email" align="center"  label="邮箱" ></el-table-column>
          <el-table-column prop="phone" align="center"  label="手机号" ></el-table-column>
          <el-table-column prop="auth" align="center"  label="身份" > </el-table-column>
          <el-table-column prop="active"  align="center"  label="是否启用" >
            <template v-slot="scope">
              <el-switch v-model="scope.row.active"></el-switch>
            </template>
          </el-table-column>
          <el-table-column  align="center"  label="操作">
            <template v-slot="scope">
              <el-button type="primary" size="small" icon="el-icon-edit"></el-button>
              <el-button type="danger" size="small"  icon="el-icon-delete" @click="delUser(scope.row.username)"></el-button>
              <el-button type="warning" size="small"  icon="el-icon-setting"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {ref,onMounted,getCurrentInstance,watchEffect } from "vue";
import { userlist,delUser } from "@/api/user"
export default {
name: "Usercard",
  setup(){
    var ctx = getCurrentInstance().ctx
    var input = ref("")
    var select = ref("")


    return{ input,select,}
  },
  methods:{
    getuserlist(){
      userlist().then(res=>{
        if(res.data.success === true){
          this.tableData = res.data.data
        }else{
          this.$message.error("请求用户列表失败")
        }
      }).catch(err=>{
        this.$message.error("请求用户列表失败")
        console.log(err)
      })
    },
    delUser(user){
      var _this = this
      console.log(user)
      // todo

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // todo
        delUser(user).then(res=>{
          if(res.data.success){
            _this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          _this.getuserlist()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
    this.getuserlist()
  },
  computed(){

  },
  data(){
    return{
      tableData:""
    }
  }
}
</script>

<style scoped lang="less">
.text {
  /*font-size: 14px;*/
}

.item {
  /*padding: 18px 0;*/
}
.el-select .el-input {
  width: 130px;
}
.el-card{
  box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  /*height: 100px !important;*/
}
.box-card {
  width: 100%;
}
.el-row{
  padding-bottom: 15px;
}

</style>